<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Student Address Book Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="javascripts/style-script.js"></script>
<script type="text/javascript" src="javascripts/actions.js"></script>
<script type="text/javascript">loadContacts(false);</script>
<script type="text/javascript" src="javascripts/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
</head>
<body>
	<div class="header-container">
		<div class="header">
			<div class="left">
				<a href="<c:url value="/" />"><div class="logo"></div></a>
			</div>
			<div class="right">
				<div class="user-navigation-area">
					Welcome <a href="<c:url value="/account" />">${username}</a> &nbsp|&nbsp <a href="<c:url value="/j_spring_security_logout" />" >Logout</a>
				</div>
				<div class="command-navigation-area">
					<form action="#" onsubmit="loadContacts(true);return false;">
					<div class="search-area">
						<div class="left-input">
							<div class="gbqfqw ">
								<div class="alignformaininput">
									<input id="searchkey" class="normalize-input"
										name="searchkey" type="text" value="">
								</div>
							</div>
						</div>
						<div class="right-input">
							<button id="stdbut" class="stdbut" name="btnG" onclick="loadContacts(true);">
								Search
							</button>
						</div>
					</div>
					</form>
					<div class="addbutton-area">
						<button id="stdbut" class="stdbut" name="btnG" onclick="generateNewContactForm();">
							Add Contact
						</button>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div><!-- END HEADER -->
	</div>
	<!-- body content  -->
		<div class="content-container">
			<div class="content">
				<div class="left">
					<div class="left-panel">
						<div class="div-tbl-header">
							<table border="0">
								<tr>
									<td class="tbl-header-col">First Name</td>
									<td class="tbl-header-col">Last Name</td>
									<td class="tbl-header-col">Birthday</td>
								</tr>
							</table>
						</div>
						<!-- list contacts  -->
						<div class="div-tbl-content" id="div-tbl-content">
							<div class="loading"></div>
						</div>
						<!--  -->
					</div>
				</div>
				<div class="right">
					<div class="right-panel">
						<div class="detail-header" id="detail-header">Details Panel</div>
						<div class="detail-body" id="detail-body"><!-- detail contents --></div>
						<div class="detail-footer" id="detail-footer"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div><!-- END CONTENT -->
		</div>
		<div class="clear"></div>
		<!-- footer container -->
		<div class="footer-container">
			<div class="footer">
				<div class="text">Student Address Book Management</div>
			</div>
		</div>
</body>
</html>